<template>
  <div class="assertion-editor">
    <el-button size="small" type="primary" @click="addAssertion">添加断言</el-button>
    
    <div v-for="(assertion, index) in assertions" :key="index" class="assertion-item">
      <el-card shadow="hover">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-select v-model="assertion.type" placeholder="断言类型">
              <el-option label="状态码断言" value="status_code" />
              <el-option label="响应时间断言" value="response_time" />
              <el-option label="JSON路径断言" value="json_path" />
              <el-option label="正则表达式断言" value="regex" />
              <el-option label="包含断言" value="contains" />
              <el-option label="相等断言" value="equals" />
            </el-select>
          </el-col>

          <el-col :span="5">
            <el-select v-model="assertion.operator" placeholder="操作符">
              <el-option label="等于" value="eq" />
              <el-option label="不等于" value="ne" />
              <el-option label="大于" value="gt" />
              <el-option label="小于" value="lt" />
              <el-option label="大于等于" value="gte" />
              <el-option label="小于等于" value="lte" />
              <el-option label="包含" value="contains" />
              <el-option label="不包含" value="not_contains" />
              <el-option label="匹配" value="matches" />
            </el-select>
          </el-col>

          <el-col :span="6">
            <el-input
              v-if="assertion.type === 'json_path'"
              v-model="assertion.path"
              placeholder="JSON路径，如：$.data.id"
            />
            <el-input
              v-else-if="assertion.type === 'regex'"
              v-model="assertion.pattern"
              placeholder="正则表达式"
            />
          </el-col>

          <el-col :span="5">
            <el-input v-model="assertion.expected" placeholder="期望值" />
          </el-col>

          <el-col :span="2">
            <el-button type="danger" size="small" @click="removeAssertion(index)">
              删除
            </el-button>
          </el-col>
        </el-row>

        <el-row v-if="assertion.type" style="margin-top: 10px;">
          <el-col :span="24">
            <el-input
              v-model="assertion.description"
              placeholder="断言描述（可选）"
              size="small"
            />
          </el-col>
        </el-row>
      </el-card>
    </div>

    <el-empty v-if="assertions.length === 0" description="暂无断言，请添加" />
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  modelValue: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['update:modelValue'])

const assertions = ref([...props.modelValue])

watch(() => props.modelValue, (val) => {
  assertions.value = [...val]
}, { deep: true })

watch(assertions, (val) => {
  emit('update:modelValue', val)
}, { deep: true })

const addAssertion = () => {
  assertions.value.push({
    type: 'status_code',
    operator: 'eq',
    expected: '200',
    path: '',
    pattern: '',
    description: ''
  })
}

const removeAssertion = (index) => {
  assertions.value.splice(index, 1)
}
</script>

<style scoped>
.assertion-editor {
  padding: 10px;
}

.assertion-item {
  margin-top: 15px;
}

.el-card {
  margin-bottom: 10px;
}
</style>
